<template>
  <div class="refund_list">
    <div class="com" v-for="(item, index) in list" :key="index">
        <div class="tui">
            <img src="../../../assets/icon/common/tui.png" alt="">
        </div>
        <div class="td">订单号 : {{item.order_id}}</div>
      <ul>
        <li v-for="ele in item.cartInfo" :key="ele.id"
        
        >
          <a>
            <div class="item">
              <div class="img" @click="goProductDetail(ele.product_id)">
                <img v-lazy="ele.productInfo.attrInfo.image" alt="" />
              </div>
              <div class="right" @click="goOrderDetail(item.order_id)">
                <div class="info">
                  <div class="des">
                    {{ ele.productInfo.store_name }}
                  </div>
                  <div class="type">
                      {{ele.productInfo.attrInfo.suk}}
                  </div>
                  <div class="price">
                    ￥{{ ele.productInfo.attrInfo.price }}
                  </div>
                  
                </div>
                <div class="num">x{{ele.cart_num}}</div>
              </div>
            </div>
          </a>
        </li>
      </ul>
      <div class="total">
        共{{ item.cartInfo.length }}件商品,总金额&nbsp;<span class="total_price">￥{{
          item.total_price
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RefundList",
  data() {
    return {
      page: 1,
      limit: 20,
      type: -3,
      list: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      let token = localStorage.getItem("token");

      axios({
        url: `/api/order/list?page=${this.page}&limit=${this.limit}&type=${this.type}`,
        method: "GET",

        headers: {
          "Authori-zation": "Bearer " + token,
        },
      }).then((res) => {
        console.log(res.data.data);
        let list = [];
        res.data.data.forEach((item) => {
          let obj = {
            order_id: item.order_id,
            total_price: item.total_price,
            cartInfo: item.cartInfo,
          };
          list.push(obj);
        });

        this.list = list;
      });
    },

    goOrderDetail(order_id){
        this.$router.push("/order/detail/"+order_id)
    },
    goProductDetail(id){
        this.$router.push("/detail/"+id)
    }
  },
};
</script>

<style lang="scss" scoped>
.com {
  background-color: #fff;
  margin-bottom: 10px;
  position: relative;
  .td{
      padding:0 15px;
      font-size: 15px;
      color: #282828;
      line-height: 44px;
      height: 44px;
      border-bottom: 1px solid #eee;
  }
  ul{
      li{
          padding: 13px 15px;
          a{
              display: block;
              .item{
                display: flex;
                justify-content: space-between;
                .img{
                    width: 65px;
                    height: 65px;
                    border-radius: 4px;
                    overflow: hidden;
                    >img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .right{
                    display: flex;
                    width: 265px;
                    justify-content: space-between;
                    .info{
                        .des{
                            width: 200px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow:hidden;
                                color: #282828;
                                font-size: 14px;
                        }
                        .price{
                            margin-top: 8.5px;
                            color: #333;
                            font-size: 14px;
                        }
                        .type{
                            color: #868686;
                            font-size: 12px;
                        }
                    }
                    .num{
                        color: #868686;
                        font-size: 13px;
                    }

                }
              }
          }
      }
  }
  .total{
      text-align: right;
      color: #282828;
      font-size: 14px;
      padding:0  15px 16px;
      span{
          font-size: 14px;
          color: #fc4141;
          font-weight: 700;
      }
  }
  .tui{
      position: absolute;
      top: 6px;
      z-index: 1000;
      background-color: #fff;
      right: 12px;
      width: 50px;
      height: 50px;
      >img{
          width: 100%;
          height: 100%;

      }
  }
}
</style>

